<template>
  <div id="manager">
    管理用户列表
    <el-card>
      <!-- tab栏切换 -->
      <el-row :gutter="24">
        <el-col :span="20">
          <el-menu
            :default-active="activeIndex"
            router
            mode="horizontal"
            @select="handleSelect"
            class="el-menu-demo"
          >
            <el-menu-item index="/manager">管理用户列表</el-menu-item>
            <el-menu-item index="/role">角色列表</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4" class="addUserWrap">
          <el-button size="large" class="addUserBtn" @click="getAddmanager"
            >新增用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 管理用户列表 -->
      <el-form
        :model="managerUser"
        :inline="true"
        class="managerForm"
        ref="managerForms"
        label-position="right"
        label-width="140px"
      >
        <el-row :guter="24">
          <el-col :span="5">
            <el-form-item label="登录名：" prop="loginName">
              <el-input v-model="managerUser.loginName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="姓名：" prop="userName">
              <el-input v-model="managerUser.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="管理角色：" prop="managerRole">
              <el-input v-model="managerUser.managerRole"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号：" prop="telNumber">
              <el-input v-model="managerUser.telNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <span class="queryButton">
              <el-button size="large" class="findBtn" @click="getFindManager"
                >查询</el-button
              >
            </span>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <el-table
        class="tableInfo"
        :data="managerTableForm"
        :flexible="true"
        style="width: 100%; height: 520px"
        :header-cell-style="{ 'text-align': 'center', 'width': '800px' }"
        :cell-style="{ 'text-align': 'center' }"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column property="name" label="姓名"></el-table-column>
        <el-table-column property="username" label="登录名"></el-table-column>
        <el-table-column property="role" label="管理角色"></el-table-column>
        <el-table-column property="latelyLG" label="最近登录"></el-table-column>
        <el-table-column property="mobile" label="手机号"></el-table-column>
        <el-table-column label="操作" width="350">
          <template #default="scope">{{scope.row.state}}
            <el-button size="small" type="warning" @click="getDisabled(scope.row)">禁用</el-button>
            <el-button
              size="small"
              type="primary"
              @click="getEditManager(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="success"
              class="success"
              @click="getResetPsd(scope.row)"
              >重置密码</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="getDelManager(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 批量删除 分页-->
      <div class="allDelWrap">
        <el-button class="allDelBtn" text @click="getAllDel"
          >批量删除</el-button
        >
      </div>
      <el-pagination background layout="prev, pager, next" :total="1000" />
      <!-- 角色列表 -->
    </el-card>
    <!-- 新增用户对话框开始 -->
    <el-dialog title="新增用户" :center=true v-model="addUserDialogVisible">
      <el-form
        :model="addUserForm"
        ref="addUserForms"
        label-position="right"
        label-width="120px"
        width="50%"
      >
        <el-row :gutter="24">
          <el-col :span="2"></el-col>
          <el-col :span="14">
            <el-form-item label="登录名：" prop="userName">
              <el-input v-model="addUserForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input v-model="addUserForm.password"></el-input>
            </el-form-item>
            <el-form-item label="姓名：" prop="realName">
              <el-input v-model="addUserForm.realName"></el-input>
            </el-form-item>
            <el-form-item label="管理角色：" prop="userRole">
              <el-input v-model="addUserForm.userRole"></el-input>
            </el-form-item>
            <el-form-item label="账户状态：" prop="status">
              <el-switch
                v-model="addUserForm.status"
                active-text="启用"
                inactive-text="禁用"
                style="
                  --el-switch-on-color: #27b148;
                  --el-switch-off-color: #f56c6c;
                "
              ></el-switch>
            </el-form-item>
            <el-form-item label="所属部门：" prop="belong">
              <el-input v-model="addUserForm.belong"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="telNumber">
              <el-input v-model="addUserForm.telNumber"></el-input>
            </el-form-item>
            <!-- <el-form-item label="最近登录：" prop="preLogin">
              <p>{{ addUserForm.preLogin }}</p>
            </el-form-item> -->
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="2"></el-col>
          <el-col :span="20">
            <el-form-item label="备注信息：" prop="remark">
              <!-- 输入文本 -->
              <el-input
                type="textarea"
                resize="none"
                v-model="addUserForm.remark"
                maxlength="1000"
                placeholder="请输入内容"
                rows="10"
                style="width: 454px"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialogFooter">
          <el-button @click="getAddCancel">取消</el-button>
          <el-button type="primary" @click="getAddConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 新增用户对话框结束 -->
    <!-- 编辑按钮对话框开始 -->
    <el-dialog title="编辑用户" :center=true v-model="editUserDialogVisible">
      <el-form
        :model="editUserForm"
        ref="editUserForms"
        label-position="right"
        label-width="120px"
        width="50%"
      >
        <el-row :gutter="24">
          <el-col :span="2"></el-col>
          <el-col :span="14">
            <el-form-item label="用户名：" prop="username">
              <el-input v-model="editUserForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input v-model="editUserForm.password"></el-input>
            </el-form-item>
            <el-form-item label="用户角色：" prop="role">
              <el-input v-model="editUserForm.role"></el-input>
            </el-form-item>
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="editUserForm.name"></el-input>
            </el-form-item>
            <el-form-item label="账户状态：" prop="state">
              <el-switch
                @click="getDisabledBtn(editUserForm.state)"
               v-model="isok"
                active-text="启用"
                inactive-text="禁用"
                style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #ff4949;
                "
              ></el-switch>
            </el-form-item>
            <el-form-item label="所属部门：" prop="Department">
              <el-input v-model="editUserForm.Department"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="mobile">
              <el-input v-model="editUserForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="最近登录：" prop="latelyLG">
              <p>{{ editUserForm.latelyLG }}</p>
              <!-- <el-input v-model="editUserForm.latelyLG"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="2"></el-col>
          <el-col :span="20">
            <el-form-item label="备注信息：" prop="remarks">
              <!-- 输入文本 -->
              <el-input
                type="textarea"
                resize="none"
                v-model="editUserForm.remarks"
                maxlength="1000"
                placeholder="请输入内容"
                rows="10"
                style="width: 454px"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialogFooter">
          <el-button @click="editUserDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="getEditConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑按钮对话框结束 -->
    <!-- 重置密码对话框开始 -->
    <el-dialog title="重置密码" :center=true v-model="resetPsdrDialogVisible">
      <el-form ref="resetPsdFormRef" :rules="resetRuels" :model="resetPsdForm" label-position="right" label-width="140px">
        <el-row :gutter="24">
        <el-col :span="4"></el-col>
        <el-col :span=16>
          <el-form-item prop="username"  label="用户名：">
            <el-input disabled v-model="resetPsdForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="newPassword" label="新密码：">
            <el-input type="password" v-model="resetPsdForm.newPassword"></el-input>
          </el-form-item>
          <!-- <el-form-item prop="repeatPassword" label="确认密码：">
            <el-input type="password" v-model="resetPsdForm.repeatPassword"></el-input>
          </el-form-item> -->
        </el-col>
      </el-row>
      </el-form>
      <template #footer>
        <span class="dialogFooter">
          <el-button @click="getResetClose">取消</el-button>
          <el-button type="primary" @click="getResetConfirm(resetPsdFormRef)">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 重置密码对话框结束 -->
    <!-- 禁用状态对话框开始 -->
    <el-dialog title="禁用" :center="true" v-model="endDialogVisible">
      <h3>当前账户状态为<h3>禁用</h3>状态，确认改为<h3>启用</h3>状态吗？</h3>
      <template #footer>
        <span class="dialogFooter">
          <el-button @click="endDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="getEndConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 禁用状态对话框结束 -->
    <!-- 启用状态对话框开始 -->
    <el-dialog title="启用" :center="true" v-model="startDialogVisible">
      <p>当前账户状态为<h3>启用</h3>状态，确认改为<h3>禁用</h3>状态吗？</p>
      <template #footer>
        <span class="dialogFooter">
          <el-button @click="startDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="getStartConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 启用状态对话框结束 -->
    <!--  -->
  </div>
</template>

<script>
import { ref, toRefs, reactive, unref, toRaw } from "vue";
import {
  managerList,
  findManager,
  editManager,
  delManager,
  addManager,
  idFindManager,
} from "../api/axiosPlus.js";
export default {
  setup() {
    //编辑用户状态禁用按钮状态
    const isok =ref()
     // 新密码校验规则
    const newPasswordCheck = (rule, value, callback) => {
      const letter = /^[a-zA-Z0-9]*$/
        if(!letter.test(value)){
        callback(new Error('必须以数字或字母开头'))
      }else {
        callback()
      }
      
    };
    // 重置密码对话框校验规则
     const resetRuels= reactive ({
        newPassword:[{validator: newPasswordCheck, trigger: 'blur'},
                     { min: 6, max: 16, message: '长度在6到16个字符之间' },
                     {required: true, message: '请输入新密码' }
                     ]
      //  repeatPassword :[{validator: repeatPasswordCheck, trigger: 'blur'},
      //                 { min: 6, max: 16, message: '长度在6到16个字符之间' },
      //                 {required: true, message: '请确认密码'}
      //  ]
      });
    // 重置密码对话框 表单节点
    const resetPsdFormRef = ref()
    // 新增对话框 表单节点
    const addUserForms = ref();
    // 当前账户登录状态
    const changeUserState = ref()
    const activeIndex = ref("/manager");
   
    const data = reactive({
      // 重置密码表单数据
      resetPsdForm:{
        newPassword:'',
      },
      
      // 启用状态下点击禁用按钮对话框显示状态
      endDialogVisible: false,
      // 禁用状态下点击禁用按钮对话框显示状态
      startDialogVisible: false,
      // 重置密码对话框显示状态
      resetPsdrDialogVisible: false,
      // 新增用户对话框 表单数据
      addUserForm: {
        userName: "",
        password: "",
        userRole: "",
        realName: "",
        status: "",
        belong: "",
        telNumber: "",
        preLogin: "",
        remark: "",
      },
      // 新增用户 对话框显示状态
      addUserDialogVisible: false,
      // 编辑用户对话框 表单数据
      editUserForm: {},
      // 编辑用户 对话框显示状态
      editUserDialogVisible: false,
      // 管理用户查询表单 初始值
      managerUser: {
        loginName: "",
        userName: "",
        managerRole: "",
        telNumber: "",
      },
      // 表格数据
      managerTableForm: "",
    })
      // 批量删除数据
    const tableList = [] 
    let tableSelect = []
    // 选中的数据
    const handleSelectionChange = (val) => {
      console.log(val);
      tableSelect = toRaw(tableList)
      tableSelect = val.map(v => v.id)
      // console.log(v);
      console.log(tableSelect.length); 
      // console.log(tableSelect);

    }
    // 批量删除
    const getAllDel = () => {
      
      const delArr = tableSelect.join(',')
      console.log(delArr);
      if(tableSelect.length == 0){
        ElMessage({
          message: '请选择需要删除的数据',
          type: 'warning'
        })
      }else{
        ElMessageBox.confirm(
        '确认删除这'+tableSelect.length+'条数据吗?',
        '温馨提示：',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then ( async () => {
          let pamas = {
            params: {
              id: delArr
            }
          }
          const res = await delManager(pamas)
          console.log(res);
          if (res.status == 201) {
          ElMessage({
            type: 'success',
            message: '删除成功',
            duration: 1000,
          })
        }
          // 更新页面表格数据
          getSpeciltyList()
        }).catch(() => {
          ElMessage({
          type: 'warning',
          message: '已取消删除！',
          duration: 1000,
        })
        } )

      }
    }
    // tab栏切换
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath);
    }
    // 点击编辑按钮中的禁用按钮
    const getDisabledBtn = (aaa) => {
      data.editUserForm.state=JSON.stringify(isok.value) 
     console.log(data.editUserForm.state);
      console.log(isok.value);
    }
    // 点击启用对话框中的确认按钮
    const getStartConfirm = async () => {
      changeUserState.value.state = false
      isok.value=changeUserState.value.state
      let res = await editManager(unref(changeUserState))
      // console.log(res);

       console.log(isok.value)
       console.log(typeof(isok.value))
      if(res.status == 200){
        getManagerList()
        ElMessage({
          showClose: true,
          message: "修改成功！",
          type: "success",
          duration: 2000,
        });
      }else {
        ElMessage({
          type: "error",
          message: res.message,
          duration: 2000,
        });
      }
      data.startDialogVisible = false
    }
    // 点击禁用对话框中的确认按钮
    const getEndConfirm = async () => {
      // console.log('当前要修改状态的数据所有信息',changeUserState);
      changeUserState.value.state = true
      isok.value=!!changeUserState.value.state
      // console.log(isok.value)
      // console.log(typeof(isok.value))
      // console.log('当前修后状态的数据所有信息',changeUserState)
      let res = await editManager(unref(changeUserState));
      console.log(res);
      if (res.status == 200) {
        getManagerList();
        ElMessage({
          showClose: true,
          message: "修改成功！",
          type: "success",
          duration: 2000,
        });
      } else {
        ElMessage({
          type: "error",
          message: res.message,
          duration: 2000,
        });
      }
      data.endDialogVisible = false
    }
    // 点击table中禁用按钮 id查询
    const getDisabled = async (e) => {
      let pamas = {
        params: {
          id: e.id,
        },
      };
      const res = await idFindManager(pamas);
      changeUserState.value = res.data[0]
     
      //  console.log(res);
      // console.log(data.editUserForm)
      if(changeUserState.value.state == 'false'){

        // 当前为禁用状态，开启禁用对话框
        // console.log(userState.value);
        data.endDialogVisible = true 

      }else if(changeUserState.value.state == 'true'){
        // console.log(userState.value);
        data.startDialogVisible = true
      }
      // res.data[0].
    }
    // 点击重置密码按钮
    const getResetPsd = async (e) => {
      data.resetPsdrDialogVisible = true
      console.log(e);
      let pamas = {
        params: {
          id: e.id
        }
      }
      // id查询
      const res = await idFindManager(pamas)
      // console.log(res);
      data.resetPsdForm = res.data[0]
    }
    // 点击重置密码中的取消按钮
    const getResetClose = () => {
      // 清空
      resetPsdFormRef.value.resetFields()
      data.resetPsdrDialogVisible = false
    }
    // 点击重置密码中的确认按钮
    const getResetConfirm =  () => {
      
      // console.log(data.resetPsdForm);
      let arr = {
         id: data.resetPsdForm.id,
        username: data.resetPsdForm.username,
        password: data.resetPsdForm.newPassword,
        mobile: data.resetPsdForm.mobile,
        role: data.resetPsdForm.role,
        name: data.resetPsdForm.name,
        latelyLG: data.resetPsdForm.latelyLG,
        remarks: data.resetPsdForm.remarks,
        state: data.resetPsdForm.state,
        Department: data.resetPsdForm.Department,
      }
      console.log(arr);
      resetPsdFormRef.value.validate(async(bool,obj) => {
        // console.log(bool,obj);
        if(!bool){
        ElMessage({
          type: 'error',
          message: '修改失败',
          duration: 2000,
        })
        }else{

          let res = await editManager(arr)
          // console.log(res);
          if( res.status == 200){
            getManagerList()
           ElMessage({
              showClose: true,
              message: '修改成功！',
              type: 'success',
              duration: 2000,
            })
          }else{
            ElMessage({
              type: 'error',
              message: res.message,
              duration: 2000,
            })
          }
          // 清空
          resetPsdFormRef.value.resetFields()
          data.resetPsdrDialogVisible = false
        }
        })
    }
    // 点击删除按钮
    const getDelManager = (e) => {
      ElMessageBox.confirm("确认删除这条数据吗?", "温馨提示：", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let pamas = {
            params: {
              id: e.id,
            },
          };
          const res = await delManager(pamas);
          // console.log(res);
          if (res.status == 201) {
            ElMessage({
              type: "success",
              message: "删除成功！",
              duration: 1000,
            });
          }
          // 更新页面数据
          getManagerList();
        })
        .catch(() => {
          ElMessage({
            duration: 1000,
            type: "warning",
            message: "已取消删除！",
            center: true,
          });
        });
    }
    // 点击 新增按钮
    const getAddmanager = () => {
      data.addUserDialogVisible = true;
    }
    // 点击新增对话框的取消按钮
    const getAddCancel = () => {
      //获取节点 表单 清空
      addUserForms.value.resetFields();
      data.addUserDialogVisible = false;
    }
    // 点击 新增对话框的确认按钮
    const getAddConfirm = async () => {
      // 将表单数据提交到数据库
      let arr = {
        username: data.addUserForm.userName,
        password: data.addUserForm.password,
        role: data.addUserForm.userRole,
        name: data.addUserForm.realName,
        state: data.addUserForm.state,
        Department: data.addUserForm.belong,
        mobile: data.addUserForm.telNumber,
        latelyLG: data.addUserForm.preLogin,
        remarks: data.addUserForm.remark,
      };
      console.log(arr);
      let res = await addManager(arr);
      console.log(res.status);
      if (res.status == 200) {
        getManagerList();
        ElMessage({
          type: "success",
          message: res.message,
          duration: 2000,
        });
        console.log(res.data);
      } else {
        ElMessage({
          type: "error",
          message: res.message,
          duration: 1000,
        });
      }
      // 对话框关闭
      data.addUserDialogVisible = false;
      // 清空
      addUserForms.value.resetFields();
    }
    // 点击 编辑对话框的确认按钮
    const getEditConfirm = async () => {
      data.editUserDialogVisible = false;
      // 将修改后的数据提交到数据库
      let arr = {
        id: data.editUserForm.id,
        username: data.editUserForm.username,
        password: data.editUserForm.password,
        mobile: data.editUserForm.mobile,
        role: data.editUserForm.role,
        name: data.editUserForm.name,
        latelyLG: data.editUserForm.latelyLG,
        remarks: data.editUserForm.remarks,
        state: data.editUserForm.state,
        Department: data.editUserForm.Department,
      };
      //  console.log(arr);
      let res = await editManager(arr);
       console.log(res);
      if (res.status == 200) {
        getManagerList();
        ElMessage({
          showClose: true,
          message: "修改成功！",
          type: "success",
          duration: 2000,
        });
      } else {
        ElMessage({
          type: "error",
          message: res.message,
          duration: 2000,
        });
      }
    }
    // 点击 编辑按钮
    const getEditManager = async (e) => {
      data.editUserDialogVisible = true;
      //  console.log(e);
      let pamas = {
        params: {
          id: e.id,
        },
      };
      const res = await idFindManager(pamas);
     console.log(res);
      data.editUserForm = res.data[0];
    if( data.editUserForm.state==="true"){
      isok.value=true
    }else{
      isok.value=false
    }
    console.log(isok.value);
    }
    // 点击 查询按钮
    const getFindManager = async () => {
      let arr = {
        username: data.managerUser.loginName,
        name: data.managerUser.userName,
        role: data.managerUser.managerRole,
        mobile: data.managerUser.telNumber,
      };
      // console.log(arr);
      let res = await findManager(arr);

      // console.log(res);
      data.managerTableForm = res.result;
      // console.log(data.managerTableForm);
    }
    // 获取用户管理列表数据
    const getManagerList = async () => {
      // 获取总条数
      let pamas = {
        params: {
          pagenum: 1,
          pagesize: 10,
        },
      };
      let res = await managerList(pamas);
      console.log(res);
      data.managerTableForm = res.result;
      // console.log(data.managerTableForm);
    }
    return {
      ...toRefs(data),
      // showVisible,
      // nowTime,
      isok,
      resetRuels,
      activeIndex,
      addUserForms,
      resetPsdFormRef,
      newPasswordCheck,
      // repeatPasswordCheck,
      getResetClose,
      getResetConfirm,
      getStartConfirm,
      getEndConfirm,
      getAddConfirm,
      getAddCancel,
      getEditConfirm,
      getResetPsd,
      getDisabled,
      getDisabledBtn,
      handleSelect,
      getAddmanager,
      getEditManager,
      getDelManager,
      getAllDel,
      getManagerList,
      getFindManager,
      handleSelectionChange,
    };
  },
  created() {
    this.getManagerList();
  },
};
</script>

<style lang="less" scoped>
.el-menu {
  border-bottom: 0px;
  width: 300px;
}
.el-menu-item {
  border-bottom: 2px solid #666;
  line-height: 40px;
  margin-left: 0px;
  margin-right: 5px;
}

.el-table {
  margin-top: 20px;
  border: 1px solid #c4c7cb;
}
#manager {
  .el-card {
    .addUserWrap {
      display: flex;
      justify-content: flex-end;

      .addUserBtn {
        color: #fff;
        background-color: #1eb96b;
        width: 120px;
        height: 32px;
        font-size: 14px;
        margin-top: 10px;
      }
    }
    .tableInfo {
      margin-top: 10px;
      border: 1px solid #C4C7CB;
      .success {
        color: #fff;
        background-color: #27B148;
        border-color:#27B148;
      }
    }
    .managerForm {
      margin-left: -72px;
      margin-top: 10px;

      .queryButton {
        display: flex;
        justify-content: flex-end;

        .findBtn {
          color: #fff;
          background-color: #27b148;
          width: 80px;
          height: 30px;
          font-size: 14px;
        }
      }
    }
  }

  // 批量删除
  .allDelWrap {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
  }

  // 分页器
  .el-pagination {
    margin-top: 10px;
    justify-content: center;
  }

  .dialogFooter {
    .el-button {
      margin: 0 20px;
    }
  }
}
/deep/.el-table th.el-table__cell.is-leaf {
  background: #e6f1ff;
}

/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager .number {
  border: 1px solid #e8e8e8;
  background: #fff;
}

/deep/.el-pagination {
  justify-content: center;
}

/deep/.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background: #fff;
  color: #4c555d;
  font-weight: 500;
  border: 1px solid #1684fc;
}

/deep/.el-pager li.btn-quicknext,
/deep/.el-pager li.btn-quickprev {
  border: 1px solid #e8e8e8;
  background: #fff;
}
</style>
